<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '添加快递员',
  },
}
</route>

<template>
  <view class="min-h-screen bg-white px-4 py-6">
    <!-- 头像上传 -->
    <view class="flex flex-col items-center mb-8">
      <view class="w-20 h-20 bg-gray-200 rounded-full mb-2 flex items-center justify-center">
        <!-- <uni-icons type="person" size="32" color="#666"></uni-icons> -->
        <image
          src="https://kuaidi.trio.pub/upload/uniapp/delivery/sctp.png"
          class="w-full h-full rounded-full"
        />
      </view>
      <!-- <text class="text-gray-400 text-sm">姓名</text> -->
    </view>

    <!-- 表单内容 -->
    <view class="space-y-4">
      <!-- 姓名输入 -->
      <view class="space-y-1">
        <text class="text-sm text-gray-600">姓名</text>
        <input
          type="text"
          placeholder="请输入姓名"
          class="w-full h-12 bg-gray-50 rounded-lg px-4"
          v-model="formData.name"
        />
      </view>

      <!-- 手机号输入 -->
      <view class="space-y-1">
        <text class="text-sm text-gray-600">手机号</text>
        <input
          type="number"
          placeholder="请输入手机号"
          class="w-full h-12 bg-gray-50 rounded-lg px-4"
          v-model="formData.mobile"
        />
      </view>

      <!-- 密码输入 -->
      <view class="space-y-1">
        <text class="text-sm text-gray-600">登录密码</text>
        <input
          type="password"
          placeholder="请输入密码"
          class="w-full h-12 bg-gray-50 rounded-lg px-4"
          v-model="formData.password"
        />
      </view>

      <!-- 寄件/派件选择 -->
      <view class="flex gap-6 mt-4">
        <view class="flex items-center">
          <radio :checked="formData.role === '1'" @click="formData.role = '1'" color="#655CF3" />
          <text class="ml-2">寄件</text>
        </view>
        <view class="flex items-center">
          <radio :checked="formData.role === '2'" @click="formData.role = '2'" color="#8b5cf6" />
          <text class="ml-2">派件</text>
        </view>
      </view>

      <!-- 证件照片 -->
      <view class="mt-6">
        <text class="text-sm text-gray-600 block mb-2">证件照片</text>
        <view class="w-full h-40 bg-gray-100 rounded-lg flex items-center justify-center">
          <uni-icons type="camera" size="32" color="#666"></uni-icons>
        </view>
      </view>

      <!-- 保存按钮 -->
      <button class="w-full h-12 bg-#655CF3 text-white rounded-lg mt-8" @click="handleSave">
        保存
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { addPersonnel } from '@/service/index/foo'

const formData = ref({
  name: '',
  mobile: '',
  password: '',
  role: '1', // 1=寄件员工, 2=派件员
})

const handleSave = async () => {
  // 表单验证
  if (!formData.value.name) {
    uni.showToast({ title: '请输入姓名', icon: 'none' })
    return
  }
  if (!formData.value.mobile) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  if (!formData.value.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' })
    return
  }

  // 组装接口参数
  const params = {
    name: formData.value.name,
    mobile: formData.value.mobile,
    password: formData.value.password,
    role: formData.value.role,
  }

  try {
    const res = await addPersonnel(params)
    console.log(res)
    if (res.code === 0) {
      uni.showToast({ title: '保存成功' })
      setTimeout(() => {
        uni.navigateBack()
        formData.value = { name: '', mobile: '', password: '', role: '1' }
      })
    } else {
      uni.showToast({ title: res.data, icon: 'none' })
    }
  } catch (e) {
    uni.showToast({ title: '保存失败', icon: 'none' })
  }
}
</script>

<style scoped>
page {
  background-color: #ffffff;
}
/* 去除输入框默认样式 */
input {
  border: none;
  outline: none;
}
</style>
